<template>
  <div class="app-container">
      <el-card class="box-card">
          <div slot="header" class="clearfix">
              <span>发起流程</span>
          </div>
          <el-col :span="18" :offset="3">
              <div class="form-conf" v-if="formOpen">
                  <parser :key="new Date().getTime()" :form-conf="formData" @submit="submit" ref="parser" @getData="getData" />
              </div>
          </el-col>
      </el-card>
  </div>
</template>

<script>
import Parser from './parser/Parser'

export default {
    name: 'WorkStart',
    components: {
        Parser
    },
    data() {
        return {
            definitionId: null,
            deployId: null,
            formOpen: false,
            formData: {},
        }
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
          this.formData = {
              "fields": [
                  {
                      "__config__": {
                          "label": "单行文本",
                          "labelWidth": null,
                          "showLabel": true,
                          "changeTag": true,
                          "tag": "el-input",
                          "tagIcon": "input",
                          "required": true,
                          "layout": "colFormItem",
                          "span": 24,
                          "document": "https://element.eleme.cn/#/zh-CN/component/input",
                          "regList": [],
                          "formId": 101,
                          "renderKey": "1011704697543977"
                      },
                      "__slot__": {
                          "prepend": "",
                          "append": ""
                      },
                      "placeholder": "请输入单行文本",
                      "style": {
                          "width": "100%"
                      },
                      "clearable": true,
                      "prefix-icon": "",
                      "suffix-icon": "",
                      "maxlength": null,
                      "show-word-limit": false,
                      "readonly": false,
                      "disabled": false,
                      "__vModel__": "field101"
                  },
                  {
                      "__config__": {
                          "label": "密码",
                          "showLabel": true,
                          "labelWidth": null,
                          "changeTag": true,
                          "tag": "el-input",
                          "tagIcon": "password",
                          "layout": "colFormItem",
                          "span": 24,
                          "required": true,
                          "regList": [],
                          "document": "https://element.eleme.cn/#/zh-CN/component/input",
                          "formId": 102,
                          "renderKey": "1021704697545128"
                      },
                      "__slot__": {
                          "prepend": "",
                          "append": ""
                      },
                      "placeholder": "请输入密码",
                      "show-password": true,
                      "style": {
                          "width": "100%"
                      },
                      "clearable": true,
                      "prefix-icon": "",
                      "suffix-icon": "",
                      "maxlength": null,
                      "show-word-limit": false,
                      "readonly": false,
                      "disabled": false,
                      "__vModel__": "field102"
                  },
                  {
                      "__config__": {
                          "label": "滑块",
                          "tag": "el-slider",
                          "tagIcon": "slider",
                          "defaultValue": 32,
                          "span": 24,
                          "showLabel": true,
                          "layout": "colFormItem",
                          "labelWidth": null,
                          "required": true,
                          "regList": [],
                          "changeTag": true,
                          "document": "https://element.eleme.cn/#/zh-CN/component/slider",
                          "formId": 101,
                          "renderKey": "1011706579858947"
                      },
                      "disabled": false,
                      "min": 0,
                      "max": 100,
                      "step": 1,
                      "show-stops": false,
                      "range": false,
                      "__vModel__": "field101"
                  },
                  {
                      "__config__": {
                          "label": "开关",
                          "tag": "el-switch",
                          "tagIcon": "switch",
                          "defaultValue": true,
                          "span": 24,
                          "showLabel": true,
                          "labelWidth": null,
                          "layout": "colFormItem",
                          "required": true,
                          "regList": [],
                          "changeTag": true,
                          "document": "https://element.eleme.cn/#/zh-CN/component/switch",
                          "formId": 102,
                          "renderKey": "1021706579864751"
                      },
                      "style": {},
                      "disabled": false,
                      "active-text": "",
                      "inactive-text": "",
                      "active-color": null,
                      "inactive-color": null,
                      "active-value": true,
                      "inactive-value": false,
                      "__vModel__": "field102"
                  }
              ],
              "formRef": "elForm",
              "formModel": "formData",
              "size": "medium",
              "labelPosition": "right",
              "labelWidth": 100,
              "formRules": "rules",
              "gutter": 15,
              "disabled": false,
              "span": 24,
              "formBtns": true
          }

          this.formOpen = true


            // this.deployId = this.$route.params && this.$route.params.deployId;
            // this.definitionId = this.$route.query && this.$route.query.definitionId;
            // getProcessForm({
            //     definitionId: this.definitionId,
            //     deployId: this.deployId
            // }).then(res => {
            //     if (res.data.data) {
            //         this.formData = res.data.data;
            //         this.formOpen = true
            //     }
            // })
        },
        /**
         * 接收子组件传的值
         */
        getData(data) {
          console.log('接收子组件传的值：', data)

            if (data) {
                const variables = [];
                data.fields.forEach(item => {
                    let variableData = {};
                    variableData.label = item.__config__.label
                    // 表单值为多个选项时
                    if (item.__config__.defaultValue instanceof Array) {
                        const array = [];
                        item.__config__.defaultValue.forEach(val => {
                            array.push(val)
                        })
                        variableData.val = array;
                    } else {
                        variableData.val = item.__config__.defaultValue
                    }
                    variables.push(variableData)
                })
                this.variables = variables;
            }
        },
        /** 返回页面 */
        goBack() {
            // 关闭当前标签页并返回上个页面
            //this.$store.dispatch("tagsView/delView", this.$route);
            this.$router.$avueRouter.closeTag()
            this.$router.go(-1)
        },
        /**
         * 提交表单
         */
        submit(data) {
          console.log('提交表单：', data)

            if (data && this.definitionId) {
                // 启动流程并将表单数据加入流程变量
                // startProcess(this.definitionId, data.valData).then(res => {
                //     this.msgSuccess(res.data.msg);
                //     this.goBack()
                // })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.form-conf {
    margin: 15px auto;
    width: 80%;
    padding: 15px;
}
</style>
